import React, { Component } from 'react'
import { Layout, Menu } from 'antd';

import { UploadOutlined, NotificationOutlined, VideoCameraOutlined } from '@ant-design/icons';
const { Sider } = Layout;
const { SubMenu } = Menu;
export default class sideMenu extends Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        const mumeList = [
            {
                key: "/home",
                title: "首页",
                ico: <NotificationOutlined />,
            },
            {
                key: "/user-manage/lis",
                title: "用户管理",
                ico: <NotificationOutlined />,
            },
            {
                key: "/right-manage",
                title: "角色管理",
                ico: <NotificationOutlined />,
                children: [
                    {
                        key: "/right-manage/role/list",
                        title: "角色列表",
                        ico: <NotificationOutlined />,
                    },
                    {
                        key: "/right-manage/right/list",
                        title: "权限列表",
                        ico: <NotificationOutlined />,
                    },
                ]
            },
        ]
        const rederMenu = (menuList) => {
            console.log("menuList", menuList)
            return menuList.map(item => {
                if (item.children) {
                    return <SubMenu key={item.key} icon={item.ico} title="item.title">
                        {rederMenu(item.children)}
                    </SubMenu>
                }
                return <Menu.Item icon={item.ico} key={item.key}>{item.title}</Menu.Item>
            })
        }
        return (
            <div>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{ height: "100%" }}>
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>

                        {rederMenu(mumeList)}

                    </Menu>
                </Sider>
            </div>
        )
    }
}
